<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
<script>
  var obj = {
    name:"珠峰",
    age:10
  };
  var q = "珠峰1234"
  Object.defineProperty(obj,'name',{
    // value:123
    // enumerable:false 控制是否可枚举
    // configurable:true 控制是否可删除
    // writable:false
    get(){
      console.log('get执行')
      return q
    },
    set(val){
      console.log('set执行')
      console.log(val)
      q = val
    }
  });
  console.log(obj)

  var obj2 = {
    name:"珠峰",
    age:10,
    children:{
      a:123,
      b:234
    }
  };

  function fn(obj2){
    for(let k in obj2){
      dereactive(obj2,k,obj2[k])
    }
  }
  

  function dereactive(obj,key,value){
    if(typeof value == 'object'){
      fn(value)
    }
    Object.defineProperty(obj,key,{
      get(){
        return value
      },
      set(newV){
        value = newV
      }
    })
  }

  var obj2_mishu = new Proxy(obj2,{
    get(target,key){
      console.log(arguments)
      console.log('get')
      return target[key]
    },
    set(target,key,val){
      console.log('set')
      target[key] = val
    }
  });

</script>